iT邦幫忙

2024 iThome 鐵人賽

DAY 16
0
自我挑戰組

HTML跨平台網頁設計系列 第 26

B O O T S T R A P J S元件

  • 分享至 

  • xImage
  •  

可切換內容標籤元件

可切換內容標籤是建置,在一個容器元素中,其中包含了標籤導覽區及內容區。當使用者在標籤導覽區中選取了不同的標籤,內容卻就會切換成相關內容。切換內容標籤,可標示在div元素中,首先是由ul li組成的標籤導覽區。ul元素要套用.nav .nav-tabs類別,li元素要套用.nav-item類別成為每個標籤項目。再來是由div套用.tab-content類別組成內容區,其中也是由div套用.tab-pane類別成為相關內容。無論是導覽區的項目或是內容區的相關內容只要在套用.active類別極為目前啟用的項目。

互動式窗簾元件

互動式窗簾件要設定在div class="modal"元素中,一般會在加入.fade類別讓視窗進入時有帶入的效果。接著加入div class="modal-dialog"元素為主內容區,再加入div class="modal-content"元素維護動視窗整個區域,其中包含了視窗版頭、視窗內容區及視窗範圍。


上一篇
B O O T S T R A P元件
下一篇
D27實作
系列文
HTML跨平台網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言